<!DOCTYPE html>
<html lang="en">

<head>
    <title>租赁关系详细</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">

    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../address-resolver.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../Date-Format.js"></script>
    <script src="../../common.js"></script>
</head>

<body>
<div id="app" class="container-fluid">
    <label>租赁房间号：{{roomNum}}</label><br><br>
    <label>客户姓名：{{customerName}}</label>
    <label>客户证件号码：{{identificationNumber}}</label>
    <label>客户电话：{{customerPhone}}</label><br><br>
    <label>起租日期：{{dateOfHire}}</label>
    <label>是否使用网络：{{isNetwork}}</label>
    <label>基础房租：{{baseRent}}</label>
    <label>押金：{{deposit}}</label>
    <label>备注信息：{{info}}</label><br><br>


    <label>租赁创建日期：{{createDate}}</label><br>


    <a href="edit.html?roomNum={{roomNum}}&customerName={{customerName}}&customerId={{identificationNumber}}&customerTel={{customerPhone}}&startDate={{dateOfHire}}
    &isNetwork={{isNetwork}}&baseRent={{baseRent}}&deposit={{deposit}}&info={{info}}">编辑</a>
    <a href="#" @click="delete(customerName)">删除</a>

</div>

<script>//首先使用一个闭包,防止污染全局对象


(function () {

    var Request = GetRequest();

    //定义页面的mvvm对象,用法参考 vuejs框架
    var vm = new Vue(
        {
            el: "#app",
            data: {
                roomNum:Request.roomName,//房间号
                customerName:Request.customerName,//客户名字
                identificationNumber:'',//证件号
                customerPhone:'',//客户电话
                dateOfHire:'',//起租日期
                isNetwork:'',//是否使用网路
                baseRent:Request.basePayment,//基本房租
                deposit:Request.deposit,//押金
                info:'',//备注信息,
                createDate:'',//租赁创建日期
                str:''
            },
            created: function () {

                var param={
                    roomNum:this.roomNum,
                    customerName:this.customerName
                }
                getDetails(param,function (data) {
                    this.identificationNumber=data.customerId;//证件号
                    this.customerPhone=data.customerTel;//客户电话
                    this.dateOfHire=(new Date(data.startDate)).Format("yyyy-MM-dd");//起租日期

                    if(data.hasNet){
                        this.isNetwork="是";
                    }else{
                        this.isNetwork="否";
                    }

                    this.info=data.otherInfo;//备注信息
                    this.createDate=(new Date(data.createDate)).Format("yyyy-MM-dd");//租赁创建日期


                }.bind(this));//bind(this)是将返回值返给vm中data

            },
            watch: {

            },
            methods: {
                delete : function (val) {
                    var param={
                        customerName:val
                    };
                    getDelete(param,function () {
                        window.location.href="../common/billing.html";
                    });
                    
                }

            }

        });



    function getDetails(param, cp){
       $.get("/rental/details", param, cp);
    }

    function getDelete(param, cp){
        $.get("/rental/delete", param, cp);
    }


})();
</script>
</body>

</html>